<template>
    <div class="my-tag">

        <div class="text" ref="tag" v-if="isEdit" @dblclick="handleClick">
            {{ tag }}
        </div>
        <input v-else class="input" :value="tag" @keyup.enter="changeTag" type="text" placeholder="输入标签" ref="inp"
            v-focus @blur="isEdit = true" />

    </div>

</template>

<script>
export default {
    props: {
        tag: String,
    },
    data() {
        return {
            isEdit: true
        }
    },
    directives: {

    },
    methods: {
        handleClick() {
            this.isEdit = false
            // this.$nextTick(()=>{
            //     this.$refs.inp.focus()
            // })
        },
        changeTag(e) {
            console.log(e.target.value);
            
            if(e.target.value.trim() === ''){
                return alert('标签内容不能为空')
            }
            this.$emit('update:tag', this.$refs.inp.value)
            this.$nextTick(() => {
                this.isEdit = true
            })
        }
    }
}
</script>

<style lang="less" scoped>
.my-tag {
    cursor: pointer;

    .input {
        appearance: none;
        outline: none;
        border: 1px solid #ccc;
        width: 100px;
        height: 40px;
        box-sizing: border-box;
        padding: 10px;
        color: #666;

        &::placeholder {
            color: #666;
        }
    }
}
</style>
